<template>
    <el-tabs v-model="currentTab" class="login-tabs" @tab-click="tabChange">
        <el-tab-pane :label="item.name" :name="item.key" v-for="item in loginTab" :key="item.key">
            <component :ref="`${item.key}Ref`" :is="item.is" v-if="currentTab === item.key" />
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue'
import LdapLogin from './LdapLogin.vue'
import SmsLogin from './SmsLogin.vue'
import AccountLogin from './AccountLogin.vue'
import { resetFormField } from '@/utils/utils'
import { loginTabConfig } from '../config'

export default defineComponent({
  name: 'LoginTab',
  components: {
    LdapLogin,
    SmsLogin,
    AccountLogin
  },
  setup() {
    const currentTab = ref<any>(loginTabConfig[0].key)
    const loginTab = ref<any>(loginTabConfig)
    const SmsLoginRef:(any | undefined) = ref<any>() // 短信登录组件
    const AccountLoginRef:(any | undefined) = ref<any>() // 账户登录组件
    const LdapLoginRef:(any | undefined) = ref<any>() // ldap登录组件

    const tabChange = async () => {
      let pointerRef = null
      switch (currentTab.value) {
        case 'sms':
          pointerRef = SmsLoginRef
          break
        case 'account':
          pointerRef = AccountLoginRef
          break
        case 'ldap':
          pointerRef = LdapLoginRef
          break
        default:
      }
      pointerRef?.value && resetFormField(pointerRef.value)
    }
    return {
      // 1. 变量
      currentTab,
      loginTab,
      SmsLoginRef,
      LdapLoginRef,
      // 方法
      tabChange
    }
  }
})
</script>

<style lang="less">
  .login-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
    margin-left: -30px;
  }
  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  .el-tabs__item {
    color: #fff;
  }
  .login-tabs {
    .el-input__inner::placeholder {
      color: #fff;
    }
    .el-button--primary {
      background: #67bdad;
      border-color: #67bdad;
    }
    .el-tabs__item.is-active {
      color: #fff;
    }
    .login-tabs .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__nav-wrap::after {
      // background-color: red;
    }
  }
</style>
